<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>iconfont Demo</title>
  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i2/O1CN01ZyAlrn1MwaMhqz36G_!!6000000001499-73-tps-64-64.ico" type="image/x-icon"/>
  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01EYTRnJ297D6vehehJ_!!6000000008020-55-tps-64-64.svg"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
  <style>
    .main .logo {
      margin-top: 0;
      height: auto;
    }

    .main .logo a {
      display: flex;
      align-items: center;
    }

    .main .logo .sub-title {
      margin-left: 0.5em;
      font-size: 22px;
      color: #fff;
      background: linear-gradient(-45deg, #3967FF, #B500FE);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  </style>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
      
    </a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=3366344" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon iconfont">&#xe600;</span>
                <div class="name">列表</div>
                <div class="code-name">&amp;#xe600;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe954;</span>
                <div class="name">拍摄，拍照</div>
                <div class="code-name">&amp;#xe954;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe955;</span>
                <div class="name">广角拍摄，拍照</div>
                <div class="code-name">&amp;#xe955;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe956;</span>
                <div class="name">support，救生圈，支持，帮助，救援，援助</div>
                <div class="code-name">&amp;#xe956;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe957;</span>
                <div class="name">二维码</div>
                <div class="code-name">&amp;#xe957;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe958;</span>
                <div class="name">条形码</div>
                <div class="code-name">&amp;#xe958;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe959;</span>
                <div class="name">钱包，余额</div>
                <div class="code-name">&amp;#xe959;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe95a;</span>
                <div class="name">警察徽章，臂章，安全，风险</div>
                <div class="code-name">&amp;#xe95a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe95b;</span>
                <div class="name">相片，照片，图片</div>
                <div class="code-name">&amp;#xe95b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe95c;</span>
                <div class="name">限制，控制，速度</div>
                <div class="code-name">&amp;#xe95c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe95d;</span>
                <div class="name">主页，首页</div>
                <div class="code-name">&amp;#xe95d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe95e;</span>
                <div class="name">红旗，重要的，标记</div>
                <div class="code-name">&amp;#xe95e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe95f;</span>
                <div class="name">书本，知识，教育</div>
                <div class="code-name">&amp;#xe95f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe960;</span>
                <div class="name">设置，参数</div>
                <div class="code-name">&amp;#xe960;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe961;</span>
                <div class="name">雨伞，太阳伞，保护</div>
                <div class="code-name">&amp;#xe961;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe962;</span>
                <div class="name">print，打印，打印机</div>
                <div class="code-name">&amp;#xe962;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe963;</span>
                <div class="name">设置，参数，配置</div>
                <div class="code-name">&amp;#xe963;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe964;</span>
                <div class="name">帮助，支持，问题，解答</div>
                <div class="code-name">&amp;#xe964;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe965;</span>
                <div class="name">帮助文档</div>
                <div class="code-name">&amp;#xe965;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe966;</span>
                <div class="name">备注</div>
                <div class="code-name">&amp;#xe966;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe967;</span>
                <div class="name">爱心，喜爱，喜欢，收藏，推荐</div>
                <div class="code-name">&amp;#xe967;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe968;</span>
                <div class="name">标签，标记</div>
                <div class="code-name">&amp;#xe968;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe969;</span>
                <div class="name">笔记本电脑</div>
                <div class="code-name">&amp;#xe969;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe96a;</span>
                <div class="name">标签，价格</div>
                <div class="code-name">&amp;#xe96a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe96b;</span>
                <div class="name">窗口，面板</div>
                <div class="code-name">&amp;#xe96b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe96c;</span>
                <div class="name">菜单，列表</div>
                <div class="code-name">&amp;#xe96c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe96d;</span>
                <div class="name">层，顺序</div>
                <div class="code-name">&amp;#xe96d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe96e;</span>
                <div class="name">磁盘，存储</div>
                <div class="code-name">&amp;#xe96e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe96f;</span>
                <div class="name">地图，导航，位置</div>
                <div class="code-name">&amp;#xe96f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe970;</span>
                <div class="name">插件</div>
                <div class="code-name">&amp;#xe970;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe971;</span>
                <div class="name">地球，网站，网址</div>
                <div class="code-name">&amp;#xe971;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe972;</span>
                <div class="name">地图，导航</div>
                <div class="code-name">&amp;#xe972;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe973;</span>
                <div class="name">杜比，音效</div>
                <div class="code-name">&amp;#xe973;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe974;</span>
                <div class="name">锻炼，运动，体育，健身</div>
                <div class="code-name">&amp;#xe974;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe975;</span>
                <div class="name">电话，通话，联系</div>
                <div class="code-name">&amp;#xe975;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe976;</span>
                <div class="name">风险，盾牌，安全</div>
                <div class="code-name">&amp;#xe976;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe977;</span>
                <div class="name">盾牌，安全，风险</div>
                <div class="code-name">&amp;#xe977;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe978;</span>
                <div class="name">电影票</div>
                <div class="code-name">&amp;#xe978;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe979;</span>
                <div class="name">风车，风力，快乐</div>
                <div class="code-name">&amp;#xe979;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe97a;</span>
                <div class="name">购物车，超市，卖场</div>
                <div class="code-name">&amp;#xe97a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe97b;</span>
                <div class="name">封面，音乐</div>
                <div class="code-name">&amp;#xe97b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe97c;</span>
                <div class="name">负面评价</div>
                <div class="code-name">&amp;#xe97c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe97d;</span>
                <div class="name">购物袋</div>
                <div class="code-name">&amp;#xe97d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe97e;</span>
                <div class="name">工作牌，工牌，职位，身份</div>
                <div class="code-name">&amp;#xe97e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe97f;</span>
                <div class="name">红绿灯，交通流量</div>
                <div class="code-name">&amp;#xe97f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe980;</span>
                <div class="name">过滤</div>
                <div class="code-name">&amp;#xe980;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe981;</span>
                <div class="name">光盘，碟子</div>
                <div class="code-name">&amp;#xe981;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe982;</span>
                <div class="name">红旗，标记，重要</div>
                <div class="code-name">&amp;#xe982;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe983;</span>
                <div class="name">徽章，成绩，成就，表彰，表扬</div>
                <div class="code-name">&amp;#xe983;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe984;</span>
                <div class="name">警告，危险</div>
                <div class="code-name">&amp;#xe984;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe985;</span>
                <div class="name">垃圾桶，删除</div>
                <div class="code-name">&amp;#xe985;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe986;</span>
                <div class="name">火箭，启动，开始，运行</div>
                <div class="code-name">&amp;#xe986;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe987;</span>
                <div class="name">监控，跟踪</div>
                <div class="code-name">&amp;#xe987;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe988;</span>
                <div class="name">徽章，表彰，表扬</div>
                <div class="code-name">&amp;#xe988;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe989;</span>
                <div class="name">奖杯，胜利，获胜，取胜</div>
                <div class="code-name">&amp;#xe989;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe98a;</span>
                <div class="name">镜头，拍摄，拍照，写真，截图，截屏</div>
                <div class="code-name">&amp;#xe98a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe98b;</span>
                <div class="name">帽子，魔术帽</div>
                <div class="code-name">&amp;#xe98b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe98c;</span>
                <div class="name">麦克风，录制，录音，话筒</div>
                <div class="code-name">&amp;#xe98c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe98d;</span>
                <div class="name">计算器，会计，统计核算，估价</div>
                <div class="code-name">&amp;#xe98d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe98e;</span>
                <div class="name">面包，共享</div>
                <div class="code-name">&amp;#xe98e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe98f;</span>
                <div class="name">礼物，赠品，馈赠，惊喜</div>
                <div class="code-name">&amp;#xe98f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe990;</span>
                <div class="name">评论，评价，讨论</div>
                <div class="code-name">&amp;#xe990;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe991;</span>
                <div class="name">全景照片，照片</div>
                <div class="code-name">&amp;#xe991;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe992;</span>
                <div class="name">日历，日程，安排，行程</div>
                <div class="code-name">&amp;#xe992;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe993;</span>
                <div class="name">日历，行程，安排</div>
                <div class="code-name">&amp;#xe993;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe994;</span>
                <div class="name">上传</div>
                <div class="code-name">&amp;#xe994;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe995;</span>
                <div class="name">删除标签</div>
                <div class="code-name">&amp;#xe995;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe996;</span>
                <div class="name">设置，参数</div>
                <div class="code-name">&amp;#xe996;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe997;</span>
                <div class="name">设置，配置，参数</div>
                <div class="code-name">&amp;#xe997;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe998;</span>
                <div class="name">摄像头，跟踪，监视</div>
                <div class="code-name">&amp;#xe998;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe999;</span>
                <div class="name">实时监控</div>
                <div class="code-name">&amp;#xe999;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe99a;</span>
                <div class="name">设置，参数，齿轮</div>
                <div class="code-name">&amp;#xe99a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe99b;</span>
                <div class="name">市场，营销，走势，趋势</div>
                <div class="code-name">&amp;#xe99b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe99c;</span>
                <div class="name">时间，历史，事件，时钟</div>
                <div class="code-name">&amp;#xe99c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe99d;</span>
                <div class="name">事件</div>
                <div class="code-name">&amp;#xe99d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe99e;</span>
                <div class="name">市场，营销，推广</div>
                <div class="code-name">&amp;#xe99e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe99f;</span>
                <div class="name">书籍，书本，知识，教育</div>
                <div class="code-name">&amp;#xe99f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9a0;</span>
                <div class="name">树，大自然，风景，旅游区，景点</div>
                <div class="code-name">&amp;#xe9a0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9a1;</span>
                <div class="name">添加，增加，加入</div>
                <div class="code-name">&amp;#xe9a1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9a2;</span>
                <div class="name">讨论，论坛，聊天，评论</div>
                <div class="code-name">&amp;#xe9a2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9a3;</span>
                <div class="name">太阳，亮度，天气</div>
                <div class="code-name">&amp;#xe9a3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9a4;</span>
                <div class="name">添加备注，备忘录</div>
                <div class="code-name">&amp;#xe9a4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9a5;</span>
                <div class="name">添加标签，标签</div>
                <div class="code-name">&amp;#xe9a5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9a6;</span>
                <div class="name">通知，喇叭</div>
                <div class="code-name">&amp;#xe9a6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9a7;</span>
                <div class="name">图片，照片，相片</div>
                <div class="code-name">&amp;#xe9a7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9a8;</span>
                <div class="name">停止，阻止，终止，取消</div>
                <div class="code-name">&amp;#xe9a8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9a9;</span>
                <div class="name">位置，导航</div>
                <div class="code-name">&amp;#xe9a9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9aa;</span>
                <div class="name">文本文档文件</div>
                <div class="code-name">&amp;#xe9aa;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9ab;</span>
                <div class="name">文件</div>
                <div class="code-name">&amp;#xe9ab;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9ac;</span>
                <div class="name">文件，文档</div>
                <div class="code-name">&amp;#xe9ac;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9ad;</span>
                <div class="name">网络，互联网</div>
                <div class="code-name">&amp;#xe9ad;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9ae;</span>
                <div class="name">五角星，五星</div>
                <div class="code-name">&amp;#xe9ae;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9af;</span>
                <div class="name">文件夹，目录</div>
                <div class="code-name">&amp;#xe9af;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9b0;</span>
                <div class="name">下载</div>
                <div class="code-name">&amp;#xe9b0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9b1;</span>
                <div class="name">五角星，流行的，推荐</div>
                <div class="code-name">&amp;#xe9b1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9b2;</span>
                <div class="name">文凭，证书，证明，成就</div>
                <div class="code-name">&amp;#xe9b2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9b3;</span>
                <div class="name">新消息</div>
                <div class="code-name">&amp;#xe9b3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9b4;</span>
                <div class="name">相机，拍摄，拍照，写真</div>
                <div class="code-name">&amp;#xe9b4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9b5;</span>
                <div class="name">笑脸，满意，乐意，喜欢</div>
                <div class="code-name">&amp;#xe9b5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9b6;</span>
                <div class="name">新邮件，邮件</div>
                <div class="code-name">&amp;#xe9b6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9b7;</span>
                <div class="name">信息，消息</div>
                <div class="code-name">&amp;#xe9b7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9b8;</span>
                <div class="name">行李箱，公文包</div>
                <div class="code-name">&amp;#xe9b8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9b9;</span>
                <div class="name">信息</div>
                <div class="code-name">&amp;#xe9b9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9ba;</span>
                <div class="name">眼睛，无效，隐藏</div>
                <div class="code-name">&amp;#xe9ba;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9bb;</span>
                <div class="name">颜色吸管</div>
                <div class="code-name">&amp;#xe9bb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9bc;</span>
                <div class="name">眼睛，有效的，可见的</div>
                <div class="code-name">&amp;#xe9bc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9bd;</span>
                <div class="name">音响</div>
                <div class="code-name">&amp;#xe9bd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9be;</span>
                <div class="name">银行卡，支付，消费，付款</div>
                <div class="code-name">&amp;#xe9be;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9bf;</span>
                <div class="name">优化，净化，清理</div>
                <div class="code-name">&amp;#xe9bf;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9c0;</span>
                <div class="name">雨伞，太阳伞，保护</div>
                <div class="code-name">&amp;#xe9c0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9c1;</span>
                <div class="name">月亮，晚上</div>
                <div class="code-name">&amp;#xe9c1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9c2;</span>
                <div class="name">在线购物</div>
                <div class="code-name">&amp;#xe9c2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9c3;</span>
                <div class="name">赞</div>
                <div class="code-name">&amp;#xe9c3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9c4;</span>
                <div class="name">云下载</div>
                <div class="code-name">&amp;#xe9c4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9c5;</span>
                <div class="name">云备份，云空间，云存储</div>
                <div class="code-name">&amp;#xe9c5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9c6;</span>
                <div class="name">证书，毕业，文凭</div>
                <div class="code-name">&amp;#xe9c6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9c7;</span>
                <div class="name">锥形筒，拦截，阻止</div>
                <div class="code-name">&amp;#xe9c7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9c8;</span>
                <div class="name">阻止，禁止，拦截，停止</div>
                <div class="code-name">&amp;#xe9c8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9c9;</span>
                <div class="name">自由，休息时间</div>
                <div class="code-name">&amp;#xe9c9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9ca;</span>
                <div class="name">主页，首页</div>
                <div class="code-name">&amp;#xe9ca;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9cb;</span>
                <div class="name">主意，创意，创新</div>
                <div class="code-name">&amp;#xe9cb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9cc;</span>
                <div class="name">admin，管理员，管理者，用户，客户</div>
                <div class="code-name">&amp;#xe9cc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9cd;</span>
                <div class="name">computer，电脑，计算机</div>
                <div class="code-name">&amp;#xe9cd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9ce;</span>
                <div class="name">bank，政府，银行，税务</div>
                <div class="code-name">&amp;#xe9ce;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9cf;</span>
                <div class="name">Account，银行，账号，帐户，财务，对公业务，税务</div>
                <div class="code-name">&amp;#xe9cf;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9d0;</span>
                <div class="name">contact，邮件，电子邮件，联系，联络</div>
                <div class="code-name">&amp;#xe9d0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9d1;</span>
                <div class="name">copy，副本，复制</div>
                <div class="code-name">&amp;#xe9d1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9d2;</span>
                <div class="name">lock，锁，安全，加密，保护</div>
                <div class="code-name">&amp;#xe9d2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9d3;</span>
                <div class="name">delete，删除，终止</div>
                <div class="code-name">&amp;#xe9d3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9d4;</span>
                <div class="name">grid</div>
                <div class="code-name">&amp;#xe9d4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9d5;</span>
                <div class="name">error，错误，警告，危险</div>
                <div class="code-name">&amp;#xe9d5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9d6;</span>
                <div class="name">power，开关</div>
                <div class="code-name">&amp;#xe9d6;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'iconfont';
  src: url('iconfont.woff2?t=1651577347671') format('woff2'),
       url('iconfont.woff?t=1651577347671') format('woff'),
       url('iconfont.ttf?t=1651577347671') format('truetype');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon iconfont icon-q-liebiao"></span>
            <div class="name">
              列表
            </div>
            <div class="code-name">.icon-q-liebiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-paishepaizhao"></span>
            <div class="name">
              拍摄，拍照
            </div>
            <div class="code-name">.icon-q-a-paishepaizhao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-guangjiaopaishepaizhao"></span>
            <div class="name">
              广角拍摄，拍照
            </div>
            <div class="code-name">.icon-q-a-guangjiaopaishepaizhao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-supportjiushengquanzhichibangzhujiuyuanyuanzhu"></span>
            <div class="name">
              support，救生圈，支持，帮助，救援，援助
            </div>
            <div class="code-name">.icon-q-a-supportjiushengquanzhichibangzhujiuyuanyuanzhu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-erweima"></span>
            <div class="name">
              二维码
            </div>
            <div class="code-name">.icon-q-erweima
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-tiaoxingma"></span>
            <div class="name">
              条形码
            </div>
            <div class="code-name">.icon-q-tiaoxingma
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-qianbaoyue"></span>
            <div class="name">
              钱包，余额
            </div>
            <div class="code-name">.icon-q-a-qianbaoyue
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-jingchahuizhangbizhanganquanfengxian"></span>
            <div class="name">
              警察徽章，臂章，安全，风险
            </div>
            <div class="code-name">.icon-q-a-jingchahuizhangbizhanganquanfengxian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-xiangpianzhaopiantupian"></span>
            <div class="name">
              相片，照片，图片
            </div>
            <div class="code-name">.icon-q-a-xiangpianzhaopiantupian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-xianzhikongzhisudu"></span>
            <div class="name">
              限制，控制，速度
            </div>
            <div class="code-name">.icon-q-a-xianzhikongzhisudu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-zhuyeshouye"></span>
            <div class="name">
              主页，首页
            </div>
            <div class="code-name">.icon-q-a-zhuyeshouye
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-hongqizhongyaodebiaoji"></span>
            <div class="name">
              红旗，重要的，标记
            </div>
            <div class="code-name">.icon-q-a-hongqizhongyaodebiaoji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-shubenzhishijiaoyu"></span>
            <div class="name">
              书本，知识，教育
            </div>
            <div class="code-name">.icon-q-a-shubenzhishijiaoyu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-shezhicanshu"></span>
            <div class="name">
              设置，参数
            </div>
            <div class="code-name">.icon-q-a-shezhicanshu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-yusantaiyangsanbaohu"></span>
            <div class="name">
              雨伞，太阳伞，保护
            </div>
            <div class="code-name">.icon-q-a-yusantaiyangsanbaohu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-printdayindayinji"></span>
            <div class="name">
              print，打印，打印机
            </div>
            <div class="code-name">.icon-q-a-printdayindayinji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-shezhicanshupeizhi"></span>
            <div class="name">
              设置，参数，配置
            </div>
            <div class="code-name">.icon-q-a-shezhicanshupeizhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-bangzhuzhichiwentijieda"></span>
            <div class="name">
              帮助，支持，问题，解答
            </div>
            <div class="code-name">.icon-q-a-bangzhuzhichiwentijieda
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-bangzhuwendang"></span>
            <div class="name">
              帮助文档
            </div>
            <div class="code-name">.icon-q-bangzhuwendang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-beizhu"></span>
            <div class="name">
              备注
            </div>
            <div class="code-name">.icon-q-beizhu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-aixinxiaixihuanshoucangtuijian"></span>
            <div class="name">
              爱心，喜爱，喜欢，收藏，推荐
            </div>
            <div class="code-name">.icon-q-a-aixinxiaixihuanshoucangtuijian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-biaoqianbiaoji"></span>
            <div class="name">
              标签，标记
            </div>
            <div class="code-name">.icon-q-a-biaoqianbiaoji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-bijibendiannao"></span>
            <div class="name">
              笔记本电脑
            </div>
            <div class="code-name">.icon-q-bijibendiannao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-biaoqianjiage"></span>
            <div class="name">
              标签，价格
            </div>
            <div class="code-name">.icon-q-a-biaoqianjiage
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-chuangkoumianban"></span>
            <div class="name">
              窗口，面板
            </div>
            <div class="code-name">.icon-q-a-chuangkoumianban
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-caidanliebiao"></span>
            <div class="name">
              菜单，列表
            </div>
            <div class="code-name">.icon-q-a-caidanliebiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-cengshunxu"></span>
            <div class="name">
              层，顺序
            </div>
            <div class="code-name">.icon-q-a-cengshunxu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-cipancunchu"></span>
            <div class="name">
              磁盘，存储
            </div>
            <div class="code-name">.icon-q-a-cipancunchu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-ditudaohangweizhi"></span>
            <div class="name">
              地图，导航，位置
            </div>
            <div class="code-name">.icon-q-a-ditudaohangweizhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-chajian"></span>
            <div class="name">
              插件
            </div>
            <div class="code-name">.icon-q-chajian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-diqiuwangzhanwangzhi"></span>
            <div class="name">
              地球，网站，网址
            </div>
            <div class="code-name">.icon-q-a-diqiuwangzhanwangzhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-ditudaohang"></span>
            <div class="name">
              地图，导航
            </div>
            <div class="code-name">.icon-q-a-ditudaohang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-dubiyinxiao"></span>
            <div class="name">
              杜比，音效
            </div>
            <div class="code-name">.icon-q-a-dubiyinxiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-duanlianyundongtiyujianshen"></span>
            <div class="name">
              锻炼，运动，体育，健身
            </div>
            <div class="code-name">.icon-q-a-duanlianyundongtiyujianshen
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-dianhuatonghualianxi"></span>
            <div class="name">
              电话，通话，联系
            </div>
            <div class="code-name">.icon-q-a-dianhuatonghualianxi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-fengxiandunpaianquan"></span>
            <div class="name">
              风险，盾牌，安全
            </div>
            <div class="code-name">.icon-q-a-fengxiandunpaianquan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-dunpaianquanfengxian"></span>
            <div class="name">
              盾牌，安全，风险
            </div>
            <div class="code-name">.icon-q-a-dunpaianquanfengxian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-dianyingpiao"></span>
            <div class="name">
              电影票
            </div>
            <div class="code-name">.icon-q-dianyingpiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-fengchefenglikuaile"></span>
            <div class="name">
              风车，风力，快乐
            </div>
            <div class="code-name">.icon-q-a-fengchefenglikuaile
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-gouwuchechaoshimaichang"></span>
            <div class="name">
              购物车，超市，卖场
            </div>
            <div class="code-name">.icon-q-a-gouwuchechaoshimaichang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-fengmianyinle"></span>
            <div class="name">
              封面，音乐
            </div>
            <div class="code-name">.icon-q-a-fengmianyinle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-fumianpingjia"></span>
            <div class="name">
              负面评价
            </div>
            <div class="code-name">.icon-q-fumianpingjia
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-gouwudai"></span>
            <div class="name">
              购物袋
            </div>
            <div class="code-name">.icon-q-gouwudai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-gongzuopaigongpaizhiweishenfen"></span>
            <div class="name">
              工作牌，工牌，职位，身份
            </div>
            <div class="code-name">.icon-q-a-gongzuopaigongpaizhiweishenfen
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-honglvdengjiaotongliuliang"></span>
            <div class="name">
              红绿灯，交通流量
            </div>
            <div class="code-name">.icon-q-a-honglvdengjiaotongliuliang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-guolv"></span>
            <div class="name">
              过滤
            </div>
            <div class="code-name">.icon-q-guolv
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-guangpandiezi"></span>
            <div class="name">
              光盘，碟子
            </div>
            <div class="code-name">.icon-q-a-guangpandiezi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-hongqibiaojizhongyao"></span>
            <div class="name">
              红旗，标记，重要
            </div>
            <div class="code-name">.icon-q-a-hongqibiaojizhongyao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-huizhangchengjichengjiubiaozhangbiaoyang"></span>
            <div class="name">
              徽章，成绩，成就，表彰，表扬
            </div>
            <div class="code-name">.icon-q-a-huizhangchengjichengjiubiaozhangbiaoyang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-jinggaoweixian"></span>
            <div class="name">
              警告，危险
            </div>
            <div class="code-name">.icon-q-a-jinggaoweixian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-lajitongshanchu"></span>
            <div class="name">
              垃圾桶，删除
            </div>
            <div class="code-name">.icon-q-a-lajitongshanchu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-huojianqidongkaishiyunhang"></span>
            <div class="name">
              火箭，启动，开始，运行
            </div>
            <div class="code-name">.icon-q-a-huojianqidongkaishiyunhang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-jiankonggenzong"></span>
            <div class="name">
              监控，跟踪
            </div>
            <div class="code-name">.icon-q-a-jiankonggenzong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-huizhangbiaozhangbiaoyang"></span>
            <div class="name">
              徽章，表彰，表扬
            </div>
            <div class="code-name">.icon-q-a-huizhangbiaozhangbiaoyang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-jiangbeishenglihuoshengqusheng"></span>
            <div class="name">
              奖杯，胜利，获胜，取胜
            </div>
            <div class="code-name">.icon-q-a-jiangbeishenglihuoshengqusheng
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-jingtoupaishepaizhaoxiezhenjietujieping"></span>
            <div class="name">
              镜头，拍摄，拍照，写真，截图，截屏
            </div>
            <div class="code-name">.icon-q-a-jingtoupaishepaizhaoxiezhenjietujieping
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-maozimoshumao"></span>
            <div class="name">
              帽子，魔术帽
            </div>
            <div class="code-name">.icon-q-a-maozimoshumao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-maikefengluzhiluyinhuatong"></span>
            <div class="name">
              麦克风，录制，录音，话筒
            </div>
            <div class="code-name">.icon-q-a-maikefengluzhiluyinhuatong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-jisuanqihuijitongjihesuangujia"></span>
            <div class="name">
              计算器，会计，统计核算，估价
            </div>
            <div class="code-name">.icon-q-a-jisuanqihuijitongjihesuangujia
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-mianbaogongxiang"></span>
            <div class="name">
              面包，共享
            </div>
            <div class="code-name">.icon-q-a-mianbaogongxiang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-liwuzengpinkuizengjingxi"></span>
            <div class="name">
              礼物，赠品，馈赠，惊喜
            </div>
            <div class="code-name">.icon-q-a-liwuzengpinkuizengjingxi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-pinglunpingjiataolun"></span>
            <div class="name">
              评论，评价，讨论
            </div>
            <div class="code-name">.icon-q-a-pinglunpingjiataolun
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-quanjingzhaopianzhaopian"></span>
            <div class="name">
              全景照片，照片
            </div>
            <div class="code-name">.icon-q-a-quanjingzhaopianzhaopian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-rilirichenganpaihangcheng"></span>
            <div class="name">
              日历，日程，安排，行程
            </div>
            <div class="code-name">.icon-q-a-rilirichenganpaihangcheng
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-rilihangchenganpai"></span>
            <div class="name">
              日历，行程，安排
            </div>
            <div class="code-name">.icon-q-a-rilihangchenganpai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-shangchuan"></span>
            <div class="name">
              上传
            </div>
            <div class="code-name">.icon-q-shangchuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-shanchubiaoqian"></span>
            <div class="name">
              删除标签
            </div>
            <div class="code-name">.icon-q-shanchubiaoqian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-shezhicanshu1"></span>
            <div class="name">
              设置，参数
            </div>
            <div class="code-name">.icon-q-a-shezhicanshu1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-shezhipeizhicanshu"></span>
            <div class="name">
              设置，配置，参数
            </div>
            <div class="code-name">.icon-q-a-shezhipeizhicanshu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-shexiangtougenzongjianshi"></span>
            <div class="name">
              摄像头，跟踪，监视
            </div>
            <div class="code-name">.icon-q-a-shexiangtougenzongjianshi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-shishijiankong"></span>
            <div class="name">
              实时监控
            </div>
            <div class="code-name">.icon-q-shishijiankong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-shezhicanshuchilun"></span>
            <div class="name">
              设置，参数，齿轮
            </div>
            <div class="code-name">.icon-q-a-shezhicanshuchilun
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-shichangyingxiaozoushiqushi"></span>
            <div class="name">
              市场，营销，走势，趋势
            </div>
            <div class="code-name">.icon-q-a-shichangyingxiaozoushiqushi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-shijianlishishijianshizhong"></span>
            <div class="name">
              时间，历史，事件，时钟
            </div>
            <div class="code-name">.icon-q-a-shijianlishishijianshizhong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-shijian"></span>
            <div class="name">
              事件
            </div>
            <div class="code-name">.icon-q-shijian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-shichangyingxiaotuiguang"></span>
            <div class="name">
              市场，营销，推广
            </div>
            <div class="code-name">.icon-q-a-shichangyingxiaotuiguang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-shujishubenzhishijiaoyu"></span>
            <div class="name">
              书籍，书本，知识，教育
            </div>
            <div class="code-name">.icon-q-a-shujishubenzhishijiaoyu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-shudaziranfengjinglvyouqujingdian"></span>
            <div class="name">
              树，大自然，风景，旅游区，景点
            </div>
            <div class="code-name">.icon-q-a-shudaziranfengjinglvyouqujingdian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-tianjiazengjiajiaru"></span>
            <div class="name">
              添加，增加，加入
            </div>
            <div class="code-name">.icon-q-a-tianjiazengjiajiaru
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-taolunluntanliaotianpinglun"></span>
            <div class="name">
              讨论，论坛，聊天，评论
            </div>
            <div class="code-name">.icon-q-a-taolunluntanliaotianpinglun
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-taiyangliangdutianqi"></span>
            <div class="name">
              太阳，亮度，天气
            </div>
            <div class="code-name">.icon-q-a-taiyangliangdutianqi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-tianjiabeizhubeiwanglu"></span>
            <div class="name">
              添加备注，备忘录
            </div>
            <div class="code-name">.icon-q-a-tianjiabeizhubeiwanglu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-tianjiabiaoqianbiaoqian"></span>
            <div class="name">
              添加标签，标签
            </div>
            <div class="code-name">.icon-q-a-tianjiabiaoqianbiaoqian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-tongzhilaba"></span>
            <div class="name">
              通知，喇叭
            </div>
            <div class="code-name">.icon-q-a-tongzhilaba
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-tupianzhaopianxiangpian"></span>
            <div class="name">
              图片，照片，相片
            </div>
            <div class="code-name">.icon-q-a-tupianzhaopianxiangpian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-tingzhizuzhizhongzhiquxiao"></span>
            <div class="name">
              停止，阻止，终止，取消
            </div>
            <div class="code-name">.icon-q-a-tingzhizuzhizhongzhiquxiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-weizhidaohang"></span>
            <div class="name">
              位置，导航
            </div>
            <div class="code-name">.icon-q-a-weizhidaohang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-wenbenwendangwenjian"></span>
            <div class="name">
              文本文档文件
            </div>
            <div class="code-name">.icon-q-wenbenwendangwenjian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-wenjian"></span>
            <div class="name">
              文件
            </div>
            <div class="code-name">.icon-q-wenjian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-wenjianwendang"></span>
            <div class="name">
              文件，文档
            </div>
            <div class="code-name">.icon-q-a-wenjianwendang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-wangluohulianwang"></span>
            <div class="name">
              网络，互联网
            </div>
            <div class="code-name">.icon-q-a-wangluohulianwang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-wujiaoxingwuxing"></span>
            <div class="name">
              五角星，五星
            </div>
            <div class="code-name">.icon-q-a-wujiaoxingwuxing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-wenjianjiamulu"></span>
            <div class="name">
              文件夹，目录
            </div>
            <div class="code-name">.icon-q-a-wenjianjiamulu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-xiazai"></span>
            <div class="name">
              下载
            </div>
            <div class="code-name">.icon-q-xiazai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-wujiaoxingliuhangdetuijian"></span>
            <div class="name">
              五角星，流行的，推荐
            </div>
            <div class="code-name">.icon-q-a-wujiaoxingliuhangdetuijian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-wenpingzhengshuzhengmingchengjiu"></span>
            <div class="name">
              文凭，证书，证明，成就
            </div>
            <div class="code-name">.icon-q-a-wenpingzhengshuzhengmingchengjiu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-xinxiaoxi"></span>
            <div class="name">
              新消息
            </div>
            <div class="code-name">.icon-q-xinxiaoxi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-xiangjipaishepaizhaoxiezhen"></span>
            <div class="name">
              相机，拍摄，拍照，写真
            </div>
            <div class="code-name">.icon-q-a-xiangjipaishepaizhaoxiezhen
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-xiaolianmanyileyixihuan"></span>
            <div class="name">
              笑脸，满意，乐意，喜欢
            </div>
            <div class="code-name">.icon-q-a-xiaolianmanyileyixihuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-xinyoujianyoujian"></span>
            <div class="name">
              新邮件，邮件
            </div>
            <div class="code-name">.icon-q-a-xinyoujianyoujian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-xinxixiaoxi"></span>
            <div class="name">
              信息，消息
            </div>
            <div class="code-name">.icon-q-a-xinxixiaoxi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-hanglixianggongwenbao"></span>
            <div class="name">
              行李箱，公文包
            </div>
            <div class="code-name">.icon-q-a-hanglixianggongwenbao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-xinxi"></span>
            <div class="name">
              信息
            </div>
            <div class="code-name">.icon-q-xinxi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-yanjingwuxiaoyincang"></span>
            <div class="name">
              眼睛，无效，隐藏
            </div>
            <div class="code-name">.icon-q-a-yanjingwuxiaoyincang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-yansexiguan"></span>
            <div class="name">
              颜色吸管
            </div>
            <div class="code-name">.icon-q-yansexiguan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-yanjingyouxiaodekejiande"></span>
            <div class="name">
              眼睛，有效的，可见的
            </div>
            <div class="code-name">.icon-q-a-yanjingyouxiaodekejiande
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-yinxiang"></span>
            <div class="name">
              音响
            </div>
            <div class="code-name">.icon-q-yinxiang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-yinhangkazhifuxiaofeifukuan"></span>
            <div class="name">
              银行卡，支付，消费，付款
            </div>
            <div class="code-name">.icon-q-a-yinhangkazhifuxiaofeifukuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-youhuajinghuaqingli"></span>
            <div class="name">
              优化，净化，清理
            </div>
            <div class="code-name">.icon-q-a-youhuajinghuaqingli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-yusantaiyangsanbaohu1"></span>
            <div class="name">
              雨伞，太阳伞，保护
            </div>
            <div class="code-name">.icon-q-a-yusantaiyangsanbaohu1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-yueliangwanshang"></span>
            <div class="name">
              月亮，晚上
            </div>
            <div class="code-name">.icon-q-a-yueliangwanshang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-zaixiangouwu"></span>
            <div class="name">
              在线购物
            </div>
            <div class="code-name">.icon-q-zaixiangouwu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-zan"></span>
            <div class="name">
              赞
            </div>
            <div class="code-name">.icon-q-zan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-yunxiazai"></span>
            <div class="name">
              云下载
            </div>
            <div class="code-name">.icon-q-yunxiazai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-yunbeifenyunkongjianyuncunchu"></span>
            <div class="name">
              云备份，云空间，云存储
            </div>
            <div class="code-name">.icon-q-a-yunbeifenyunkongjianyuncunchu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-zhengshubiyewenping"></span>
            <div class="name">
              证书，毕业，文凭
            </div>
            <div class="code-name">.icon-q-a-zhengshubiyewenping
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-zhuixingtonglanjiezuzhi"></span>
            <div class="name">
              锥形筒，拦截，阻止
            </div>
            <div class="code-name">.icon-q-a-zhuixingtonglanjiezuzhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-zuzhijinzhilanjietingzhi"></span>
            <div class="name">
              阻止，禁止，拦截，停止
            </div>
            <div class="code-name">.icon-q-a-zuzhijinzhilanjietingzhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-ziyouxiuxishijian"></span>
            <div class="name">
              自由，休息时间
            </div>
            <div class="code-name">.icon-q-a-ziyouxiuxishijian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-zhuyeshouye1"></span>
            <div class="name">
              主页，首页
            </div>
            <div class="code-name">.icon-q-a-zhuyeshouye1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-zhuyichuangyichuangxin"></span>
            <div class="name">
              主意，创意，创新
            </div>
            <div class="code-name">.icon-q-a-zhuyichuangyichuangxin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-adminguanliyuanguanlizheyonghukehu"></span>
            <div class="name">
              admin，管理员，管理者，用户，客户
            </div>
            <div class="code-name">.icon-q-a-adminguanliyuanguanlizheyonghukehu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-computerdiannaojisuanji"></span>
            <div class="name">
              computer，电脑，计算机
            </div>
            <div class="code-name">.icon-q-a-computerdiannaojisuanji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-bankzhengfuyinhangshuiwu"></span>
            <div class="name">
              bank，政府，银行，税务
            </div>
            <div class="code-name">.icon-q-a-bankzhengfuyinhangshuiwu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-Accountyinhangzhanghaozhanghucaiwuduigongyewushuiwu"></span>
            <div class="name">
              Account，银行，账号，帐户，财务，对公业务，税务
            </div>
            <div class="code-name">.icon-q-a-Accountyinhangzhanghaozhanghucaiwuduigongyewushuiwu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-contactyoujiandianziyoujianlianxilianluo"></span>
            <div class="name">
              contact，邮件，电子邮件，联系，联络
            </div>
            <div class="code-name">.icon-q-a-contactyoujiandianziyoujianlianxilianluo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-copyfubenfuzhi"></span>
            <div class="name">
              copy，副本，复制
            </div>
            <div class="code-name">.icon-q-a-copyfubenfuzhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-locksuoanquanjiamibaohu"></span>
            <div class="name">
              lock，锁，安全，加密，保护
            </div>
            <div class="code-name">.icon-q-a-locksuoanquanjiamibaohu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-deleteshanchuzhongzhi"></span>
            <div class="name">
              delete，删除，终止
            </div>
            <div class="code-name">.icon-q-a-deleteshanchuzhongzhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-grid"></span>
            <div class="name">
              grid
            </div>
            <div class="code-name">.icon-q-grid
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-errorcuowujinggaoweixian"></span>
            <div class="name">
              error，错误，警告，危险
            </div>
            <div class="code-name">.icon-q-a-errorcuowujinggaoweixian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-q-a-powerkaiguan"></span>
            <div class="name">
              power，开关
            </div>
            <div class="code-name">.icon-q-a-powerkaiguan
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont icon-q-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-liebiao"></use>
                </svg>
                <div class="name">列表</div>
                <div class="code-name">#icon-q-liebiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-paishepaizhao"></use>
                </svg>
                <div class="name">拍摄，拍照</div>
                <div class="code-name">#icon-q-a-paishepaizhao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-guangjiaopaishepaizhao"></use>
                </svg>
                <div class="name">广角拍摄，拍照</div>
                <div class="code-name">#icon-q-a-guangjiaopaishepaizhao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-supportjiushengquanzhichibangzhujiuyuanyuanzhu"></use>
                </svg>
                <div class="name">support，救生圈，支持，帮助，救援，援助</div>
                <div class="code-name">#icon-q-a-supportjiushengquanzhichibangzhujiuyuanyuanzhu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-erweima"></use>
                </svg>
                <div class="name">二维码</div>
                <div class="code-name">#icon-q-erweima</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-tiaoxingma"></use>
                </svg>
                <div class="name">条形码</div>
                <div class="code-name">#icon-q-tiaoxingma</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-qianbaoyue"></use>
                </svg>
                <div class="name">钱包，余额</div>
                <div class="code-name">#icon-q-a-qianbaoyue</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-jingchahuizhangbizhanganquanfengxian"></use>
                </svg>
                <div class="name">警察徽章，臂章，安全，风险</div>
                <div class="code-name">#icon-q-a-jingchahuizhangbizhanganquanfengxian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-xiangpianzhaopiantupian"></use>
                </svg>
                <div class="name">相片，照片，图片</div>
                <div class="code-name">#icon-q-a-xiangpianzhaopiantupian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-xianzhikongzhisudu"></use>
                </svg>
                <div class="name">限制，控制，速度</div>
                <div class="code-name">#icon-q-a-xianzhikongzhisudu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-zhuyeshouye"></use>
                </svg>
                <div class="name">主页，首页</div>
                <div class="code-name">#icon-q-a-zhuyeshouye</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-hongqizhongyaodebiaoji"></use>
                </svg>
                <div class="name">红旗，重要的，标记</div>
                <div class="code-name">#icon-q-a-hongqizhongyaodebiaoji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-shubenzhishijiaoyu"></use>
                </svg>
                <div class="name">书本，知识，教育</div>
                <div class="code-name">#icon-q-a-shubenzhishijiaoyu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-shezhicanshu"></use>
                </svg>
                <div class="name">设置，参数</div>
                <div class="code-name">#icon-q-a-shezhicanshu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-yusantaiyangsanbaohu"></use>
                </svg>
                <div class="name">雨伞，太阳伞，保护</div>
                <div class="code-name">#icon-q-a-yusantaiyangsanbaohu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-printdayindayinji"></use>
                </svg>
                <div class="name">print，打印，打印机</div>
                <div class="code-name">#icon-q-a-printdayindayinji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-shezhicanshupeizhi"></use>
                </svg>
                <div class="name">设置，参数，配置</div>
                <div class="code-name">#icon-q-a-shezhicanshupeizhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-bangzhuzhichiwentijieda"></use>
                </svg>
                <div class="name">帮助，支持，问题，解答</div>
                <div class="code-name">#icon-q-a-bangzhuzhichiwentijieda</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-bangzhuwendang"></use>
                </svg>
                <div class="name">帮助文档</div>
                <div class="code-name">#icon-q-bangzhuwendang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-beizhu"></use>
                </svg>
                <div class="name">备注</div>
                <div class="code-name">#icon-q-beizhu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-aixinxiaixihuanshoucangtuijian"></use>
                </svg>
                <div class="name">爱心，喜爱，喜欢，收藏，推荐</div>
                <div class="code-name">#icon-q-a-aixinxiaixihuanshoucangtuijian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-biaoqianbiaoji"></use>
                </svg>
                <div class="name">标签，标记</div>
                <div class="code-name">#icon-q-a-biaoqianbiaoji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-bijibendiannao"></use>
                </svg>
                <div class="name">笔记本电脑</div>
                <div class="code-name">#icon-q-bijibendiannao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-biaoqianjiage"></use>
                </svg>
                <div class="name">标签，价格</div>
                <div class="code-name">#icon-q-a-biaoqianjiage</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-chuangkoumianban"></use>
                </svg>
                <div class="name">窗口，面板</div>
                <div class="code-name">#icon-q-a-chuangkoumianban</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-caidanliebiao"></use>
                </svg>
                <div class="name">菜单，列表</div>
                <div class="code-name">#icon-q-a-caidanliebiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-cengshunxu"></use>
                </svg>
                <div class="name">层，顺序</div>
                <div class="code-name">#icon-q-a-cengshunxu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-cipancunchu"></use>
                </svg>
                <div class="name">磁盘，存储</div>
                <div class="code-name">#icon-q-a-cipancunchu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-ditudaohangweizhi"></use>
                </svg>
                <div class="name">地图，导航，位置</div>
                <div class="code-name">#icon-q-a-ditudaohangweizhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-chajian"></use>
                </svg>
                <div class="name">插件</div>
                <div class="code-name">#icon-q-chajian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-diqiuwangzhanwangzhi"></use>
                </svg>
                <div class="name">地球，网站，网址</div>
                <div class="code-name">#icon-q-a-diqiuwangzhanwangzhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-ditudaohang"></use>
                </svg>
                <div class="name">地图，导航</div>
                <div class="code-name">#icon-q-a-ditudaohang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-dubiyinxiao"></use>
                </svg>
                <div class="name">杜比，音效</div>
                <div class="code-name">#icon-q-a-dubiyinxiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-duanlianyundongtiyujianshen"></use>
                </svg>
                <div class="name">锻炼，运动，体育，健身</div>
                <div class="code-name">#icon-q-a-duanlianyundongtiyujianshen</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-dianhuatonghualianxi"></use>
                </svg>
                <div class="name">电话，通话，联系</div>
                <div class="code-name">#icon-q-a-dianhuatonghualianxi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-fengxiandunpaianquan"></use>
                </svg>
                <div class="name">风险，盾牌，安全</div>
                <div class="code-name">#icon-q-a-fengxiandunpaianquan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-dunpaianquanfengxian"></use>
                </svg>
                <div class="name">盾牌，安全，风险</div>
                <div class="code-name">#icon-q-a-dunpaianquanfengxian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-dianyingpiao"></use>
                </svg>
                <div class="name">电影票</div>
                <div class="code-name">#icon-q-dianyingpiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-fengchefenglikuaile"></use>
                </svg>
                <div class="name">风车，风力，快乐</div>
                <div class="code-name">#icon-q-a-fengchefenglikuaile</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-gouwuchechaoshimaichang"></use>
                </svg>
                <div class="name">购物车，超市，卖场</div>
                <div class="code-name">#icon-q-a-gouwuchechaoshimaichang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-fengmianyinle"></use>
                </svg>
                <div class="name">封面，音乐</div>
                <div class="code-name">#icon-q-a-fengmianyinle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-fumianpingjia"></use>
                </svg>
                <div class="name">负面评价</div>
                <div class="code-name">#icon-q-fumianpingjia</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-gouwudai"></use>
                </svg>
                <div class="name">购物袋</div>
                <div class="code-name">#icon-q-gouwudai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-gongzuopaigongpaizhiweishenfen"></use>
                </svg>
                <div class="name">工作牌，工牌，职位，身份</div>
                <div class="code-name">#icon-q-a-gongzuopaigongpaizhiweishenfen</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-honglvdengjiaotongliuliang"></use>
                </svg>
                <div class="name">红绿灯，交通流量</div>
                <div class="code-name">#icon-q-a-honglvdengjiaotongliuliang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-guolv"></use>
                </svg>
                <div class="name">过滤</div>
                <div class="code-name">#icon-q-guolv</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-guangpandiezi"></use>
                </svg>
                <div class="name">光盘，碟子</div>
                <div class="code-name">#icon-q-a-guangpandiezi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-hongqibiaojizhongyao"></use>
                </svg>
                <div class="name">红旗，标记，重要</div>
                <div class="code-name">#icon-q-a-hongqibiaojizhongyao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-huizhangchengjichengjiubiaozhangbiaoyang"></use>
                </svg>
                <div class="name">徽章，成绩，成就，表彰，表扬</div>
                <div class="code-name">#icon-q-a-huizhangchengjichengjiubiaozhangbiaoyang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-jinggaoweixian"></use>
                </svg>
                <div class="name">警告，危险</div>
                <div class="code-name">#icon-q-a-jinggaoweixian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-lajitongshanchu"></use>
                </svg>
                <div class="name">垃圾桶，删除</div>
                <div class="code-name">#icon-q-a-lajitongshanchu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-huojianqidongkaishiyunhang"></use>
                </svg>
                <div class="name">火箭，启动，开始，运行</div>
                <div class="code-name">#icon-q-a-huojianqidongkaishiyunhang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-jiankonggenzong"></use>
                </svg>
                <div class="name">监控，跟踪</div>
                <div class="code-name">#icon-q-a-jiankonggenzong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-huizhangbiaozhangbiaoyang"></use>
                </svg>
                <div class="name">徽章，表彰，表扬</div>
                <div class="code-name">#icon-q-a-huizhangbiaozhangbiaoyang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-jiangbeishenglihuoshengqusheng"></use>
                </svg>
                <div class="name">奖杯，胜利，获胜，取胜</div>
                <div class="code-name">#icon-q-a-jiangbeishenglihuoshengqusheng</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-jingtoupaishepaizhaoxiezhenjietujieping"></use>
                </svg>
                <div class="name">镜头，拍摄，拍照，写真，截图，截屏</div>
                <div class="code-name">#icon-q-a-jingtoupaishepaizhaoxiezhenjietujieping</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-maozimoshumao"></use>
                </svg>
                <div class="name">帽子，魔术帽</div>
                <div class="code-name">#icon-q-a-maozimoshumao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-maikefengluzhiluyinhuatong"></use>
                </svg>
                <div class="name">麦克风，录制，录音，话筒</div>
                <div class="code-name">#icon-q-a-maikefengluzhiluyinhuatong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-jisuanqihuijitongjihesuangujia"></use>
                </svg>
                <div class="name">计算器，会计，统计核算，估价</div>
                <div class="code-name">#icon-q-a-jisuanqihuijitongjihesuangujia</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-mianbaogongxiang"></use>
                </svg>
                <div class="name">面包，共享</div>
                <div class="code-name">#icon-q-a-mianbaogongxiang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-liwuzengpinkuizengjingxi"></use>
                </svg>
                <div class="name">礼物，赠品，馈赠，惊喜</div>
                <div class="code-name">#icon-q-a-liwuzengpinkuizengjingxi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-pinglunpingjiataolun"></use>
                </svg>
                <div class="name">评论，评价，讨论</div>
                <div class="code-name">#icon-q-a-pinglunpingjiataolun</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-quanjingzhaopianzhaopian"></use>
                </svg>
                <div class="name">全景照片，照片</div>
                <div class="code-name">#icon-q-a-quanjingzhaopianzhaopian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-rilirichenganpaihangcheng"></use>
                </svg>
                <div class="name">日历，日程，安排，行程</div>
                <div class="code-name">#icon-q-a-rilirichenganpaihangcheng</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-rilihangchenganpai"></use>
                </svg>
                <div class="name">日历，行程，安排</div>
                <div class="code-name">#icon-q-a-rilihangchenganpai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-shangchuan"></use>
                </svg>
                <div class="name">上传</div>
                <div class="code-name">#icon-q-shangchuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-shanchubiaoqian"></use>
                </svg>
                <div class="name">删除标签</div>
                <div class="code-name">#icon-q-shanchubiaoqian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-shezhicanshu1"></use>
                </svg>
                <div class="name">设置，参数</div>
                <div class="code-name">#icon-q-a-shezhicanshu1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-shezhipeizhicanshu"></use>
                </svg>
                <div class="name">设置，配置，参数</div>
                <div class="code-name">#icon-q-a-shezhipeizhicanshu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-shexiangtougenzongjianshi"></use>
                </svg>
                <div class="name">摄像头，跟踪，监视</div>
                <div class="code-name">#icon-q-a-shexiangtougenzongjianshi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-shishijiankong"></use>
                </svg>
                <div class="name">实时监控</div>
                <div class="code-name">#icon-q-shishijiankong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-shezhicanshuchilun"></use>
                </svg>
                <div class="name">设置，参数，齿轮</div>
                <div class="code-name">#icon-q-a-shezhicanshuchilun</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-shichangyingxiaozoushiqushi"></use>
                </svg>
                <div class="name">市场，营销，走势，趋势</div>
                <div class="code-name">#icon-q-a-shichangyingxiaozoushiqushi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-shijianlishishijianshizhong"></use>
                </svg>
                <div class="name">时间，历史，事件，时钟</div>
                <div class="code-name">#icon-q-a-shijianlishishijianshizhong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-shijian"></use>
                </svg>
                <div class="name">事件</div>
                <div class="code-name">#icon-q-shijian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-shichangyingxiaotuiguang"></use>
                </svg>
                <div class="name">市场，营销，推广</div>
                <div class="code-name">#icon-q-a-shichangyingxiaotuiguang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-shujishubenzhishijiaoyu"></use>
                </svg>
                <div class="name">书籍，书本，知识，教育</div>
                <div class="code-name">#icon-q-a-shujishubenzhishijiaoyu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-shudaziranfengjinglvyouqujingdian"></use>
                </svg>
                <div class="name">树，大自然，风景，旅游区，景点</div>
                <div class="code-name">#icon-q-a-shudaziranfengjinglvyouqujingdian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-tianjiazengjiajiaru"></use>
                </svg>
                <div class="name">添加，增加，加入</div>
                <div class="code-name">#icon-q-a-tianjiazengjiajiaru</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-taolunluntanliaotianpinglun"></use>
                </svg>
                <div class="name">讨论，论坛，聊天，评论</div>
                <div class="code-name">#icon-q-a-taolunluntanliaotianpinglun</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-taiyangliangdutianqi"></use>
                </svg>
                <div class="name">太阳，亮度，天气</div>
                <div class="code-name">#icon-q-a-taiyangliangdutianqi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-tianjiabeizhubeiwanglu"></use>
                </svg>
                <div class="name">添加备注，备忘录</div>
                <div class="code-name">#icon-q-a-tianjiabeizhubeiwanglu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-tianjiabiaoqianbiaoqian"></use>
                </svg>
                <div class="name">添加标签，标签</div>
                <div class="code-name">#icon-q-a-tianjiabiaoqianbiaoqian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-tongzhilaba"></use>
                </svg>
                <div class="name">通知，喇叭</div>
                <div class="code-name">#icon-q-a-tongzhilaba</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-tupianzhaopianxiangpian"></use>
                </svg>
                <div class="name">图片，照片，相片</div>
                <div class="code-name">#icon-q-a-tupianzhaopianxiangpian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-tingzhizuzhizhongzhiquxiao"></use>
                </svg>
                <div class="name">停止，阻止，终止，取消</div>
                <div class="code-name">#icon-q-a-tingzhizuzhizhongzhiquxiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-weizhidaohang"></use>
                </svg>
                <div class="name">位置，导航</div>
                <div class="code-name">#icon-q-a-weizhidaohang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-wenbenwendangwenjian"></use>
                </svg>
                <div class="name">文本文档文件</div>
                <div class="code-name">#icon-q-wenbenwendangwenjian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-wenjian"></use>
                </svg>
                <div class="name">文件</div>
                <div class="code-name">#icon-q-wenjian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-wenjianwendang"></use>
                </svg>
                <div class="name">文件，文档</div>
                <div class="code-name">#icon-q-a-wenjianwendang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-wangluohulianwang"></use>
                </svg>
                <div class="name">网络，互联网</div>
                <div class="code-name">#icon-q-a-wangluohulianwang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-wujiaoxingwuxing"></use>
                </svg>
                <div class="name">五角星，五星</div>
                <div class="code-name">#icon-q-a-wujiaoxingwuxing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-wenjianjiamulu"></use>
                </svg>
                <div class="name">文件夹，目录</div>
                <div class="code-name">#icon-q-a-wenjianjiamulu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-xiazai"></use>
                </svg>
                <div class="name">下载</div>
                <div class="code-name">#icon-q-xiazai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-wujiaoxingliuhangdetuijian"></use>
                </svg>
                <div class="name">五角星，流行的，推荐</div>
                <div class="code-name">#icon-q-a-wujiaoxingliuhangdetuijian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-wenpingzhengshuzhengmingchengjiu"></use>
                </svg>
                <div class="name">文凭，证书，证明，成就</div>
                <div class="code-name">#icon-q-a-wenpingzhengshuzhengmingchengjiu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-xinxiaoxi"></use>
                </svg>
                <div class="name">新消息</div>
                <div class="code-name">#icon-q-xinxiaoxi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-xiangjipaishepaizhaoxiezhen"></use>
                </svg>
                <div class="name">相机，拍摄，拍照，写真</div>
                <div class="code-name">#icon-q-a-xiangjipaishepaizhaoxiezhen</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-xiaolianmanyileyixihuan"></use>
                </svg>
                <div class="name">笑脸，满意，乐意，喜欢</div>
                <div class="code-name">#icon-q-a-xiaolianmanyileyixihuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-xinyoujianyoujian"></use>
                </svg>
                <div class="name">新邮件，邮件</div>
                <div class="code-name">#icon-q-a-xinyoujianyoujian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-xinxixiaoxi"></use>
                </svg>
                <div class="name">信息，消息</div>
                <div class="code-name">#icon-q-a-xinxixiaoxi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-hanglixianggongwenbao"></use>
                </svg>
                <div class="name">行李箱，公文包</div>
                <div class="code-name">#icon-q-a-hanglixianggongwenbao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-xinxi"></use>
                </svg>
                <div class="name">信息</div>
                <div class="code-name">#icon-q-xinxi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-yanjingwuxiaoyincang"></use>
                </svg>
                <div class="name">眼睛，无效，隐藏</div>
                <div class="code-name">#icon-q-a-yanjingwuxiaoyincang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-yansexiguan"></use>
                </svg>
                <div class="name">颜色吸管</div>
                <div class="code-name">#icon-q-yansexiguan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-yanjingyouxiaodekejiande"></use>
                </svg>
                <div class="name">眼睛，有效的，可见的</div>
                <div class="code-name">#icon-q-a-yanjingyouxiaodekejiande</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-yinxiang"></use>
                </svg>
                <div class="name">音响</div>
                <div class="code-name">#icon-q-yinxiang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-yinhangkazhifuxiaofeifukuan"></use>
                </svg>
                <div class="name">银行卡，支付，消费，付款</div>
                <div class="code-name">#icon-q-a-yinhangkazhifuxiaofeifukuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-youhuajinghuaqingli"></use>
                </svg>
                <div class="name">优化，净化，清理</div>
                <div class="code-name">#icon-q-a-youhuajinghuaqingli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-yusantaiyangsanbaohu1"></use>
                </svg>
                <div class="name">雨伞，太阳伞，保护</div>
                <div class="code-name">#icon-q-a-yusantaiyangsanbaohu1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-yueliangwanshang"></use>
                </svg>
                <div class="name">月亮，晚上</div>
                <div class="code-name">#icon-q-a-yueliangwanshang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-zaixiangouwu"></use>
                </svg>
                <div class="name">在线购物</div>
                <div class="code-name">#icon-q-zaixiangouwu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-zan"></use>
                </svg>
                <div class="name">赞</div>
                <div class="code-name">#icon-q-zan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-yunxiazai"></use>
                </svg>
                <div class="name">云下载</div>
                <div class="code-name">#icon-q-yunxiazai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-yunbeifenyunkongjianyuncunchu"></use>
                </svg>
                <div class="name">云备份，云空间，云存储</div>
                <div class="code-name">#icon-q-a-yunbeifenyunkongjianyuncunchu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-zhengshubiyewenping"></use>
                </svg>
                <div class="name">证书，毕业，文凭</div>
                <div class="code-name">#icon-q-a-zhengshubiyewenping</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-zhuixingtonglanjiezuzhi"></use>
                </svg>
                <div class="name">锥形筒，拦截，阻止</div>
                <div class="code-name">#icon-q-a-zhuixingtonglanjiezuzhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-zuzhijinzhilanjietingzhi"></use>
                </svg>
                <div class="name">阻止，禁止，拦截，停止</div>
                <div class="code-name">#icon-q-a-zuzhijinzhilanjietingzhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-ziyouxiuxishijian"></use>
                </svg>
                <div class="name">自由，休息时间</div>
                <div class="code-name">#icon-q-a-ziyouxiuxishijian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-zhuyeshouye1"></use>
                </svg>
                <div class="name">主页，首页</div>
                <div class="code-name">#icon-q-a-zhuyeshouye1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-zhuyichuangyichuangxin"></use>
                </svg>
                <div class="name">主意，创意，创新</div>
                <div class="code-name">#icon-q-a-zhuyichuangyichuangxin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-adminguanliyuanguanlizheyonghukehu"></use>
                </svg>
                <div class="name">admin，管理员，管理者，用户，客户</div>
                <div class="code-name">#icon-q-a-adminguanliyuanguanlizheyonghukehu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-computerdiannaojisuanji"></use>
                </svg>
                <div class="name">computer，电脑，计算机</div>
                <div class="code-name">#icon-q-a-computerdiannaojisuanji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-bankzhengfuyinhangshuiwu"></use>
                </svg>
                <div class="name">bank，政府，银行，税务</div>
                <div class="code-name">#icon-q-a-bankzhengfuyinhangshuiwu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-Accountyinhangzhanghaozhanghucaiwuduigongyewushuiwu"></use>
                </svg>
                <div class="name">Account，银行，账号，帐户，财务，对公业务，税务</div>
                <div class="code-name">#icon-q-a-Accountyinhangzhanghaozhanghucaiwuduigongyewushuiwu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-contactyoujiandianziyoujianlianxilianluo"></use>
                </svg>
                <div class="name">contact，邮件，电子邮件，联系，联络</div>
                <div class="code-name">#icon-q-a-contactyoujiandianziyoujianlianxilianluo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-copyfubenfuzhi"></use>
                </svg>
                <div class="name">copy，副本，复制</div>
                <div class="code-name">#icon-q-a-copyfubenfuzhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-locksuoanquanjiamibaohu"></use>
                </svg>
                <div class="name">lock，锁，安全，加密，保护</div>
                <div class="code-name">#icon-q-a-locksuoanquanjiamibaohu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-deleteshanchuzhongzhi"></use>
                </svg>
                <div class="name">delete，删除，终止</div>
                <div class="code-name">#icon-q-a-deleteshanchuzhongzhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-grid"></use>
                </svg>
                <div class="name">grid</div>
                <div class="code-name">#icon-q-grid</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-errorcuowujinggaoweixian"></use>
                </svg>
                <div class="name">error，错误，警告，危险</div>
                <div class="code-name">#icon-q-a-errorcuowujinggaoweixian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-q-a-powerkaiguan"></use>
                </svg>
                <div class="name">power，开关</div>
                <div class="code-name">#icon-q-a-powerkaiguan</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
